import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { router } from 'umi';
import { connect } from 'dva';
import { Modal, Table, Form, Card, Button, Row, Col, Input, Select, Spin, InputNumber, Popconfirm } from 'antd';

import { post } from '@/utils/request';
import * as api from '@/constants/api';
import { toast, notify, alert, confirm } from '@/utils/utils';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ sysSetting, loading }) => ({
  sysSetting,
  loading: loading.effects['sysSetting/updateSysSetting'],
}))
@Form.create()
class SysSetting extends PureComponent{

  constructor(props) {
    super(props);

    this.state = {

    }
  }

  componentDidMount(){
    const {sysSetting: {settingObj}, form} = this.props;

    form.setFieldsValue(settingObj);
  }

  handleSubmit = (e)=>{
    e.preventDefault();

    const {dispatch, form} = this.props;

    form.validateFields((err, value)=>{
      if(err){
        return;
      }

      dispatch({
        type: 'sysSetting/updateSysSetting',
        payload: value,
      }).then(()=>{
        toast('更新成功')
      })
    })
  }

  handleReset = ()=>{
    const {form}=this.props;
    const obj = {};
    Object.keys(form.getFieldsValue()).forEach(key=>{
      obj[key]=undefined;
    })

    form.setFieldsValue(obj);
  }

  render(){
    const {
      sysSetting: {settingObj},
      loading,
      form: {getFieldDecorator},
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
        md: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper title='系统设置'>
        <Card bordered={false}>
          <Form {...formItemLayout} onSubmit={this.handleSubmit} style={{marginTop: 8}}>
            <FormItem label='设置1'>
              {getFieldDecorator('set1', {
                rules: [
                  {
                    required: true,
                    message: '请输入设置1',
                  },
                ],
              })(<Input placeholder='设置1' />)}
            </FormItem>

            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={loading}>
                保存
              </Button>
              <Popconfirm title='确定要清空吗？' onConfirm={this.handleReset}>
                <Button style={{ marginLeft: 8 }}>
                  清空
                </Button>
              </Popconfirm>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderWrapper>
    )
  }
}

export default SysSetting;
